import { Component, OnInit } from '@angular/core'
import { CommonUtil } from 'src/app/common/utils/common.util'
import { Location } from '@angular/common'
import { QaService } from './services/qa.service'

@Component({
  selector: 'app-qa',
  templateUrl: './qa.component.html',
  styleUrls: ['./qa.component.scss']
})
export class QaComponent implements OnInit {
  tabs = ['我的提问', '我的回答']
  active = 0
  question = []
  answer = []
  questionNomore = false
  answerNomore = false
  error = false
  loading = false

  constructor(private location: Location, private service: QaService, private utils: CommonUtil) {
    // 触底翻页
    window.onscroll = e => {
      let clientHeight = document.documentElement.clientHeight
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      let scrollHeight = document.body.scrollHeight
      let key = this.getAliasByActive()
      // 触底了
      if (scrollTop + clientHeight === scrollHeight) {
        setTimeout(() => {
          if (!this[key + 'Nomore'] && !this.error) {
            this.getList(this.service[key].pager.Start)
          }
        }, 1000)
      }
    }
  }

  ngOnInit() {
    this.loading = true
    this.getList(0, 'question')
    this.getList(0, 'answer')
  }

  // 返回
  onClickLeft() {
    this.location.back()
  }
  // 切换tab
  handleTabChange(e) {
    let key = this.getAliasByActive()
    this.active = e.index
    document.body.scrollTop = document.documentElement.scrollTop = 0
    this.getList(0, key)
  }
  // 获取列表(start: 起始条目，KEY?：列表名称)
  getList(start, KEY?) {
    let key = KEY || this.getAliasByActive()
    let funcName = `get${this.upperFirstLetter(key)}List`
    this.service[funcName](
      start,
      res => {
        setTimeout(() => {
          this.error = false
          this.loading = false
        }, 500)
        if (res.Success && res.Result) {
          // 下一次的起始条目需要加上本次请求到的数据条数
          this.service[key].pager.Start += res.Result.Value.length
          // 如果本次请求到的数据小于每页总数，说明没有下一页了
          if (res.Result.Value.length < this.service[key].pager.Limit) {
            this[key + 'Nomore'] = true
          } else {
            this[key + 'Nomore'] = false
          }
          // 数据处理
          let data = res.Result.Value.map(item => {
            let obj = this[key + 'Filter'](item)
            return obj
          })
          // 如果是第一页，那先把数据清空
          if (start === 0) {
            this[key] = []
          }
          this[key] = this[key].concat(data)
        } else {
          this[key + 'Nomore'] = false
        }
      },
      err => {
        setTimeout(() => {
          this.error = true
          this.loading = false
        }, 500)
      }
    )
  }
  // list列表优化
  trackByFn(index, item) {
    return item.Id
  }
  // 重新加载
  handleReload() {
    this.error = false
    this.loading = true
    let key = this.getAliasByActive()
    this.getList(this.service[key].pager.Start)
  }
  // 根据当前激活的tab获取当前所在模块
  getAliasByActive() {
    let active = this.active
    if (active === 0) {
      return 'question'
    } else if (active === 1) {
      return 'answer'
    }
  }
  // 我的提问数据过滤
  questionFilter(item) {
    let Answer = '暂无回答'
    let Count = 0
    if (item.Answer) {
      Answer = item.Answer.Content
      Count = item.Answer.Count
    }
    item.Answer = Answer
    item.AnswerCount = Count
    return item
  }
  // 我的回答数据过滤
  answerFilter(item) {
    return item
  }
  // 首字母大写
  upperFirstLetter(str) {
    if (str.length === 0) {
      return ''
    } else {
      let first_l = str.substring(0, 1)
      let first_u = first_l.toUpperCase()
      return first_u + str.substring(1, str.length)
    }
  }
}
